<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript">
$(function () {
	var app = new Vue({
		el:'#app',
		data:function(){
			return {
				form:{}
				,rules:{
					title: [{ required: true, message: '请输入标题', trigger: 'change' }]
					,image: [{ required: true, message: '请上传图片', trigger: 'change' }]
					,orderNum: [{ required: true, message: '请选择序号', trigger: 'change' }]
					,page: [{ required: true, message: '请输入所属页', trigger: ['blur', 'change'] }]
				}
				,imageUrl:''
			}
		}
	});
});
</script>
<style>
.container{
	margin:10px 30px;
}
.header{
	border-left:10px solid #57bda5;
	font-size:30px;
	color:#000000;
	font-weight:bold;
	margin:20px 0 10px 10px;
	padding-left: 20px;
}
.content{
	border:2px solid;
	font-size:14px;
}
.content__header{
	background:#f7f7f7;
}
.content__block{
	border-bottom:1px solid #898a9b;
	padding:5px 20px 5px 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>
<body>
<div id="app" v-cloak>
	<div class="container">
		<div class="header">
			广告管理
		</div>
		<el-form ref="form" :model="form" label-width="80px" :rules="rules" label-position="left">
			<div class="content">
				<div class="content__header content__block">
					<el-row>
						<el-col :span="6">
							操作人：张文峰
						</el-col>
						<el-col :span="6">
							部门：综合管理部
						</el-col>
					</el-row>
				</div>
				<div class="content__block">
					  <el-form-item label="标题" prop="title">
					    <el-input type="textarea" v-model="form.desc" size="mini"></el-input>
					  </el-form-item>
					  <el-form-item label="轮播图" prop="image">
					  	<el-upload
						  class="avatar-uploader"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :show-file-list="false">
						  <img v-if="imageUrl" :src="imageUrl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					  </el-form-item>
				</div>
				<div class="content__block">
					<el-row>
						<el-col :span="6">
							<el-form-item label="所属页" prop="page">
							    <el-input  v-model="form.page" size="mini"></el-input>
							 </el-form-item>
						</el-col>
						<el-col :span="6"  :offset="6">
							<el-form-item label="排序号" prop="orderNum">
							    <el-input  v-model="form.orderNum" size="mini"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div class="content__block">
					<el-form-item label="上线时间">
					    <el-date-picker
					      v-model="form.date"
					      type="date"
					      placeholder="选择日期" 
					      size="mini"
					      >
					    </el-date-picker>
					  </el-form-item>
				</div>
			</div>
			<el-form-item>
				<div style="text-align:center;margin-top:10px;">
					<el-button type="primary" style="width:50%;">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</div>
</body>
</html>